<template>
  <div class="certificate-box">
    <div class="certificate">
      <img :src="headeImg" class="head-img" />
      <img :src="qrcodeUrl" class="qrcode" />
      <p class="exam exam-year">{{ certificate.examMonth.slice(0, 4) }}</p>
      <p class="exam exam-month">{{ certificate.examMonth.slice(-2) }}</p>
      <p class="access">{{ certificate.accessMonth.slice(0, 4) + '年' + certificate.accessMonth.slice(-2) + '月' }}</p>
      <div class="info">
        <p>{{ certificate.userName }}</p>
        <p>{{ certificate.idCard }}</p>
        <p>{{ certificate.certificateId }}</p>
        <p>{{ certificate.certificateName }}</p>
        <p>职业能力培训综合服务平台</p>
      </div>
      <el-button type="primary" class="btn" size="large" @click="goHome">返回首页</el-button>
    </div>
  </div>
</template>


<script setup>
import { reactive, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { getDetail } from '@/api'

const route = useRoute()
const router = useRouter()
const certificate = reactive({
  headPath: '',
  qrPath: '',
  userName: '张三',
  idCard: '51160218847485963',
  certificateId: 'AA00001', // 证书编号
  certificateName: '高级', // 岗位名称
  examMonth: '202401', // 考核月份
  accessMonth: '202402' // 发证月份
});
// 头像
const headeImg = computed(() => {
  const headPath = certificate.headPath || ''
  return headPath ? 'https://www.bumanjianuo.com.cn/api/admin/sys-file/local/picture/' + headPath : ''
})
// 二维码
const qrcodeUrl = computed(() => {
  const qrPath = certificate.qrPath || ''
  return qrPath ? 'https://www.bumanjianuo.com.cn/api/admin/sys-file/local/picture/' + qrPath : ''
})

onMounted(() => {
  const id = route.query.id || ''
  if (id) getCertificateDetails(id)
})

const getCertificateDetails = (id) => {
  getDetail(id).then(res => {
    const { code, data } = res
    if (code === 0 && data) {
      Object.assign(certificate, data)
      console.log('[ certificate ]-59', certificate)
    }
  })
}

const goHome = () => {
  router.push({ path: '/' })
}

</script>

<style>
.certificate-box {
  width: 100%;
  min-width: 920px;
  height: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../assets/imgs/login-bg.jpg) no-repeat center center;
  background-size: 100% 100%;
}
.certificate {
  width: 920px;
  height: 664px;
  background: url('@/assets/imgs/certificate.jpg') no-repeat center center;
  background-size: 100% 100%;
  position: relative;
}
.head-img {
  width: 110px;
  height: 135px;
  background: #f4f5f6;
  position: absolute;
  top: 210px;
  left: 154px;
}
.qrcode {
  width: 100px;
  height: 100px;
  background: #f4f5f6;
  position: absolute;
  bottom: 102px;
  left: 175px;
}
.info {
  position: absolute;
  top: 205px;
  left: 502px;
}
.info p {
  line-height: 29px;
  font-family: '华文中宋';
  font-size: 16px;
  font-weight: bold;
  color: #040000;
  padding: 0;
  margin: 0;
}
.info .exam, .access {
  font-family: '华文中宋';
  font-weight: bold;
  color: #040000;
}
.exam {
  position: absolute;
  bottom: 268px;
  font-size: 14px;
  padding: 0;
  margin: 0;
}
.exam.exam-year {
  left: 210px;
}
.exam.exam-month {
  left: 273px;
}
.access {
  position: absolute;
  bottom: 95px;
  right: 199px;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
/* 
@media only screen and (min-width: 320px) {
html,body {font-size: 55.556% !important;}
}
@media only screen and (min-width: 360px) {
  html,body {font-size: 62.5% !important;}
}
@media only screen and (min-width: 375px) {
  html,body {font-size: 68.10417% !important;}
}
@media only screen and (min-width: 414px) {
  html,body {font-size: 71.875% !important;}
}
@media only screen and (min-width: 768px) {
  html,body {font-size: 133.3333% !important;}
}
@media only screen and (min-width: 1024px) {
  html,body {font-size: 177.77778% !important;}
}
@media only screen and (max-width: 750px) {
  .certificate {
    width: 400px;
    height: 300px;
    background: url('@/assets/imgs/certificate.jpg') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
  }
  .head-img {
    width: 50px;
    height: 60px;
    background: #f4f5f6;
    position: absolute;
    top: 97px;
    left: 5.8rem;
  }
  .qrcode {
    width: 40px;
    height: 40px;
    background: #f4f5f6;
    position: absolute;
    bottom: 45px;
    left: 6.8rem;
  }
  .info {
    position: absolute;
    top: 94px;
    left: 19.2rem;
  }
  .info p {
    line-height: 13px;
    font-size: 0.8rem;
    font-weight: normal;
    color: #040000;
    margin: 0;
    padding: 0;
  }
  .exam, .access {
    color: #040000;
    font-size: 0.5rem;
    font-weight: normal;
  }
  .exam {
    position: absolute;
    bottom: 120px;
  }
  .exam.exam-year {
    left: 7.5rem;
  }
  .exam.exam-month {
    left: 10rem;
  }
  .access {
    position: absolute;
    bottom: 40px;
    right: 84px;
  }
} */
.certificate-box .btn {
  width: 160px;
  background: #315efb;
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translate(-50%, 0);
}

</style>
